<template>
  <div
    id="menu-wrap-drag"
    class="MainMenu-wrap"
    @mouseenter="lockHeader"
    @mouseleave="unlockHeader"
  >
    <div
      :style="`
        height: 100%;
        border-right: 1px solid black;
        width: 1px;
        position: absolute;
        right: 0;
        z-index: 2001;
        cursor: col-resize;
        opacity: 0.5;
        border-color:${$store.state.app.themeColor};
      `"
    ></div>
    <el-aside id="menu-wrap">
      <template v-if="$store.state.app.isCollapse === 'collapse'">
        <el-button
          icon="Expand"
          class="collapse-button"
          :style="{ color: $store.state.app.themeColor, position: 'absolute' }"
          @click="handleCommitExpand('notCollapse')"
        ></el-button>
      </template>
      <template v-else>
        <el-button
          :style="{ color: $store.state.app.themeColor, position: 'absolute' }"
          icon="Fold"
          class="collapse-button"
          @click="handleCommitExpand('collapse')"
        ></el-button>
      </template>
      <!--        unique-opened-->
      <el-menu
        class="el-menu-vertical"
        :collapse="$store.state.app.isCollapse === 'collapse'"
        :default-active="defaultOpen"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
        text-color="#606266"
        :active-text-color="$store.state.app.themeColor"
        :collapse-transition="true"
      >
        <main-menu-item :menu-list="menuList"></main-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import MainMenuItem from '@/views/Home/MainMenuItem.vue'
import rgbHex from 'rgb-hex'
export default {
  name: 'MainMenu',
  components: { MainMenuItem },
  props: {
    menuTheme: {
      type: String,
      default: 'dark',
    },
    menuList: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data: function () {
    return {
      defaultOpen: '',
    }
  },
  created() {
    this.defaultOpen = this.$route.name // 获取路径
    // this.setAutoCollapse()
  },
  mounted() {
    this.createMenuDrag()
    this.handleToggleExpand()
  },
  watch: {
    '$store.state.app.isCollapse'(val) {
      this.handleToggleExpand()
    },
    '$route.name': function (val) {
      if (val.indexOf('Detail') > -1 || val.indexOf('Report') > -1) {
        return
      }
      // 判断需要折叠的页面中是否包含当前所到路由, 如果符合条件则关闭菜单栏
      let needCollapseArr = [
        'DagEdit',
        // 'RTFeatureRegister',
        // 'OfflineFeatureRegister',
      ]
      if (needCollapseArr.includes(val)) {
        this.handleCommitExpand('collapse')
      }
      this.defaultOpen = val
    },
  },
  methods: {
    setAutoCollapse() {
      window.onresize = () => {
        const htmlWidth =
          document.documentElement.clientWidth || document.body.clientWidth
        let isCollapse = htmlWidth < 800 ? 'collapse' : 'notCollapse'
        this.$store.commit('setCollapse', isCollapse)
      }
    },
    getBackground() {
      let d = this.$store.state.app.themeColor
      let primaryColor = rgbHex(d).substr(0, 6)
      let c = `#${primaryColor}33`
      // return `background:${c}`
      return ''
    },
    addCul(a, b) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(a + b + 'px')
        }, 0)
      })
    },
    minCul(a, b) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(a - b + 'px')
        }, 0)
      })
    },
    createMenuDrag() {
      let drag = document.getElementById('menu-wrap-drag')
      drag.style.width =
        this.$store.state.app.menuWidth.indexOf('px') > -1
          ? this.$store.state.app.menuWidth
          : '230px'
      drag.onmousedown = function (event) {
        //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
        let diffX = event.x - drag.offsetWidth
        if (typeof drag.setCapture !== 'undefined') {
          drag.setCapture()
        }
        document.onmousemove = function (event) {
          // let event = event || window.event
          let moveX = event.x - diffX
          if (moveX < 20) {
            moveX = 20
          }
          drag.style.width = moveX + 'px'
          this.$store.commit('setMenuWidth', drag.style.width)
        }
        document.onmouseup = function (event) {
          this.onmousemove = null
          this.onmouseup = null
          // 修复低版本ie bug
          if (typeof drag.releaseCapture !== 'undefined') {
            drag.releaseCapture()
          }
        }
      }
    },
    removeMenuDrag() {
      document.getElementById('menu-wrap-drag').onmousedown = null
    },
    lockHeader() {
      this.$store.commit('setIsLockHeader', true)
    },
    unlockHeader() {
      this.$store.commit('setIsLockHeader', false)
    },
    handleCommitExpand(d) {
      this.$store.commit('setCollapse', d)
      this.handleToggleExpand()
    },
    handleToggleExpand() {
      let menuDom = document.getElementById('menu-wrap-drag')
      menuDom.style.transitionDuration = '0.1s'
      if (this.$store.state.app.isCollapse === 'collapse') {
        let sWidth = menuDom.offsetWidth
        let v = (sWidth - 64) / 10
        let changeWidth = async () => {
          let nowWidth = menuDom.offsetWidth
          menuDom.style.width = '64px'
          // if (
          //   nowWidth > 64 &&
          //   (this.$route.name !== 'GuidelinesReport' ||
          //     this.$route.name !== 'CityDiagnosis')
          // ) {
          //   menuDom.style.width = await this.minCul(nowWidth, v)
          //   await changeWidth()
          // } else {
          //   menuDom.style.width = '64px'
          // }
        }
        changeWidth()
        this.removeMenuDrag()
      } else {
        let changeWidth = async () => {
          let nowWidth = menuDom.offsetWidth
          menuDom.style.width =
            this.$store.state.app.menuWidth.indexOf('px') > -1
              ? this.$store.state.app.menuWidth
              : '230px'
          // if (
          //   nowWidth < 230 &&
          //   (this.$route.name !== 'GuidelinesReport' ||
          //     this.$route.name !== 'CityDiagnosis')
          // ) {
          //   let nowWidth = menuDom.offsetWidth
          //   menuDom.style.width = await this.addCul(nowWidth, 20)
          //   await changeWidth()
          // } else {
          //   menuDom.style.width =
          //     this.$store.state.app.menuWidth.indexOf('px') > -1
          //       ? this.$store.state.app.menuWidth
          //       : '230px'
          // }
        }
        changeWidth()
        this.createMenuDrag()
      }
      this.$nextTick(() => {
        menuDom.style.transitionDuration = '0s'
      })
    },
    handleOpen() {
      console.log('open')
    },
    handleClose() {},
    handleSelect(index, indexPath) {
      let url = ''
      if (index.indexOf('link2Frame_http://dfare') > -1) {
        if (this.$store.state.app.environment === 'us') {
          url = 'http://tset.intra.prox.com'
        } else {
          url = 'http://test-de.intra.prox.com'
        }
        window.open(url, '_blank')
      }
      this.$emit('on-select', index)
    },
  },
}
</script>

<style lang="less">
.MainMenu-wrap {
  width: 230px;
  position: relative;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  position: relative;
  //background-color: #33334b;
  color: rgb(191, 203, 217);
  overflow: hidden;
  z-index: 2000;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);
  .isCollapse {
    animation: isCollapse 0.3s linear;
    animation-fill-mode: forwards;
  }
  .noCollapse {
    animation: noCollapse 0.3s linear;
    animation-fill-mode: forwards;
  }
  @keyframes isCollapse {
    from {
      width: 210px;
    }
    to {
      width: 64px;
    }
  }
  @keyframes noCollapse {
    from {
      width: 64px;
    }
    to {
      width: 210px;
    }
  }

  .el-menu {
    text-align: left;
    border: 0;
  }
  .el-menu-item [class^='el-icon-'] {
    margin-top: -1px;
  }
  .collapse-button {
    //color: #fe9153 !important;
    width: 100%;
    height: 50px;
    font-size: 25px;
  }
  .el-submenu__title,
  .el-menu-item {
    //padding: 0 30px !important;
    //padding-left: 25px !important;
  }
  .el-submenu__title,
  .el-menu-item {
    border-left: 3px solid transparent;
    height: 45px;
    line-height: 45px;
  }
  .el-menu-item:not(.el-submenu__title) {
    background: #f1f1f1 !important;
  }
  .el-menu-item.is-active,
  .el-submenu__title:hover,
  .el-menu-item:focus,
  .el-menu-item:hover {
    background: #e1e1e1 !important;
    border-left: 3px solid;
  }
  //rgb(48, 65, 86)
  .el-aside {
    overflow: hidden; //超出隐藏
    text-overflow: ellipsis; //超出部分变成省略号
    //display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
    //-webkit-box-orient: vertical; //从上到下垂直排列子元素
    //-webkit-line-clamp: 2; //表示显示的行数（需要结合上面两个属性）
  }

  .el-menu-vertical:not(.el-menu--collapse) {
    width: 100%;
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .el-menu--collapse {
    width: 64px;
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  //.el-menu-vertical-demo:not(.el-menu--collapse) {
  //  width: 210px;
  //  min-height: 400px;
  //}

  .rotate:before {
    display: inline-block;
    transform: rotate(90deg);
  }
  //
  //.el-menu--collapse .el-menu-item span,
  //.el-menu--collapse .el-submenu > .el-submenu__title span {
  //  height: 0;
  //  width: 0;
  //  overflow: hidden;
  //  visibility: hidden;
  //  display: inline-block;
  //}
  .el-button {
    border-radius: 0;
    //background: #33334b;
    border: 1px solid #f2f6fc;
    border-right: none;
    padding: 0 20px;
    transition-duration: 0.3s;
    //box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
  }
  .el-button:hover {
    transition-duration: 0.3s;
  }
  .el-button:focus,
  .el-button:active {
    outline: 0;
  }
}
</style>
